<template>
    <div class="company-intro">
        <!-- 企业信息头部 -->
        <div class="company-header">
            
            <el-image
            class="company-logo"
            :src="companylist.image"
            fit="contain"
            alt="公司Logo"
            
            style="width: 80px; height: 80px; cursor: pointer;"
            >
            
            </el-image>
            <div class="company-info">
                <!-- 第一行：公司名称和上传日期 -->
                <div class="header-row-1">
                    <h1 class="company-name">{{ companylist.name }}</h1>
                    <div class="tags-container">
                        <span v-for="(tag, tagIndex) in companylist.baseIndustryList" :key="tagIndex"
                            class="tilted-tag">
                            <span class="tag-text">{{ tag.name }}</span>
                        </span>
                    </div>
                </div>

                <!-- 第二行：税务代码、联系人和地址 -->
                <div class="header-row-2">
                    <div class="company-details">
                        <p class="company-address" style="color:#ddd;">{{ companylist.address }}</p>

                        <span size="medium" type="info" class="tax-tag">{{ companylist.taxationCode }}</span>

                        <span class="meta-item">{{ companylist.person }}</span>
                    </div>
                    <p class="upload-date">上传日期 {{ companylist.createTime }}</p>

                </div>
            </div>
        </div>

        <!-- 使用button按钮实现切换功能 -->
        <div class="tab-buttons">
            <button :class="['tab-button', { 'active': activeTabName === 'intro' }]" @click="activeTabName = 'intro'">
                <span>企业信息介绍</span>
            </button>
            <button :class="['tab-button', { 'active': activeTabName === 'position' }]"
                @click="activeTabName = 'position'">
                <span>企业关联产品</span>
            </button>
        </div>

        <!-- 内容区域 -->
        <div v-if="activeTabName === 'intro'" class="tab-content-section">
            <!-- <h2 class="section-title">企业概述</h2> -->
            <p class="company-description">
                {{ companylist.description }}
            </p>
        </div>

        <div v-if="activeTabName === 'position'" class="tab-content-section">
            <div class="products">
                <div class="product-card" v-for="product in guanlproducts" :key="product.id"
                    @click="showProductDetails(product)" style="cursor: pointer;">
                    <div class="product-icon-container">
                        <div class="product-image-container">
                            <img v-if="product.image" :src="product.image" alt="产品图片" class="product-image" />
                            <div v-else class="product-image-placeholder"></div>
                        </div>
                        <div class="product-icon" :title="product.name">{{ truncateText(product.name, 15) }}</div>
                    </div>
                    <!-- 添加产品标准数据的格式化展示 -->
                    <div v-if="product.productStandard" class="product-standard">
                        <p v-for="(value, key) in parseProductStandard(product.productStandard)" :key="key"
                            class="standard-item">
                            <strong>{{ formatKey(key) }}:</strong> {{ value }}
                        </p>
                    </div>
                    <div v-else class="no-standard">
                        <p>暂无产品标准信息</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- 产品详情弹窗 -->
        <el-dialog title="" :visible.sync="dialogVisible" width="1200px" :close-on-click-modal="false">
            <div v-if="selectedProduct" class="dialog-product-content">
                <div class="dialog-header-section">
                    <!-- 左侧图片 -->
                    <div class="dialog-image-container">
                        <!-- <img v-if="selectedProduct.image" :src="selectedProduct.image" alt="产品图片"
                            class="dialog-product-image" /> -->
                            <el-image
                            class="dialog-product-image"
                            :src="selectedProduct.image"
                            fit="contain"
                            alt="产品图片"
                            
                           
                            >
                            <!-- :preview-src-list="[selectedProduct.image]" -->
                            </el-image>
                        <!-- <div v-else class="dialog-image-placeholder"></div> -->
                    </div>

                    <!-- 右侧信息区域 -->
                    <div class="dialog-info-section">
                        <!-- 第一行：产品名称和行业标签 -->
                        <div class="dialog-row-1">
                            <div class="dialog-product-name" :title="selectedProduct.name">{{
                                truncateText(selectedProduct.name, 30) }}</div>
                            <div class="dialog-tags-container">
                                <span v-for="(tag, tagIndex) in companylist.baseIndustryList" :key="tagIndex"
                                    class="tilted-tag">
                                    <span class="tag-text">{{ tag.name }}</span>
                                </span>
                            </div>
                        </div>

                        <!-- 第二行：公司名称和创建时间 -->
                        <div class="dialog-row-2">
                            <h1 class="dialog-company-name">{{ companylist.name }}</h1>
                            <div class="dialog-create-time">创建时间: {{ selectedProduct.createTime || '-' }}</div>
                        </div>
                    </div>
                </div>

                <!-- 产品标准信息保持不变 -->
                <div v-if="selectedProduct.productStandard" class="product-standard-large">
                    <h2 class="eldiasectiontitle">产品描述</h2>
                    <p class="elprodescript">{{ selectedProduct.name }}</p>

                    <p class="elprodescript">{{ selectedProduct.description }}</p>
                    <h2 class="eldiasectiontitle">产品参数</h2>

                    <p v-for="(value, key) in parseProductStandard(selectedProduct.productStandard)" :key="key"
                        class="standard-item-large">
                        <strong>{{ formatKey(key) }}:</strong> {{ value }}
                    </p>
                </div>
                <div v-else class="no-standard-large">
                    <p>暂无产品标准信息</p>
                </div>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { getEnterpriseDetail, getEnterpriseProductList } from '@/api/user';
export default {
    data() {
        return {
            companylist: {},
            activeTabName: 'intro',
            pageNum: 1,
            pageSize: 10,
            products: [
                {
                    id: 1,
                    name: "随身WIFI - ACE",
                    network: "5G NSA/SA双模，支持4G LTE Cat.16，兼容全球主流频段",
                    speed: "5G下行速率1.2Gbps，上行速率150Mbps；4G下行速率300Mbps，上行速率50Mbps",
                    wifiSpec: "双频WIFI 6 (2.4GHz+5GHz)，最大连接设备数10台",
                    battery: "3000mAh高密度锂电池，工作时长12小时，待机时长300小时，支持18W快充",
                    hardware: "高通骁龙X55芯片，512MB RAM+4GB ROM，支持eSIM虚拟卡+实体SIM卡双模式",
                    feature: null,
                },
            ],
            guanlproducts: [],
            // 弹窗相关状态
            dialogVisible: false,
            selectedProduct: null,

        };
    },
    mounted() {
        const id = this.$route.query.id;
        if (id) {
            this.loadDetailcp(id)
            this.Queryqiyecp(id)
        }
    },
    methods: {
        parseProductStandard(standardStr) {
            try {
                // 如果已经是对象，直接返回
                if (typeof standardStr === 'object') {
                    return standardStr;
                }
                // 尝试解析JSON字符串
                const parsed = JSON.parse(standardStr);
                return typeof parsed === 'object' ? parsed : {};
            } catch (error) {
                console.error('解析产品标准数据失败:', error);
                return {};
            }
        },

        // 格式化键名，去除可能的特殊字符（如星号）
        formatKey(key) {
            return key.replace(/[*]/g, '').trim();
        },
        // 截断过长文本
        truncateText(text, maxLength) {
            if (!text || text.length <= maxLength) {
                return text;
            }
            return text.substring(0, maxLength) + '...';
        },
        // 加载企业详情
        loadDetailcp(id) {
            getEnterpriseDetail(id).then(res => {
                this.companylist = res.data
            }).catch(err => {
                console.error('获取详情失败:', err)
            })
        },
        Queryqiyecp(id) {
            getEnterpriseProductList({ enterprisesId: id, pageNum: this.pageNum, pageSize: this.pageSize }).then(res => {
                this.guanlproducts = res.rows
            }).catch(err => {
                console.error('获取详情失败:', err)
            })
        },
        // 显示产品详情弹窗
        showProductDetails(product) {
            this.selectedProduct = product;
            this.dialogVisible = true;
        }
    },

};
</script>

<style scoped>
.company-intro {
    max-width: 1640px;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        margin:0 auto;

}

/* 为企业信息介绍标签页设置样式 */
.tab-buttons {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    gap: 160px;
    background-color: #04142B;
    padding-top: 30px;
    /* 按钮之间相隔160px */
}

/* 未选中按钮样式 */
.tab-button {
    width: 236px;
    height: 40px;
    border-radius: 0px;
    border: 1px solid #1A9ADB;
    background: transparent;
    color: #fff;
    font-size: 16px;
    line-height: 40px;
    padding: 0;
    text-align: center;
    margin: 0;
    transition: all 0.3s ease;
    cursor: pointer;
    border-bottom: 1px solid #1A9ADB;
    border-left: 1px solid #1A9ADB;
    transform: skewX(-15deg);
    /* 按钮倾斜-15度 */
    outline: none;
    /* 去掉点击时的黑色边框 */
}

/* 按钮内文字不倾斜 */
.tab-button span {
    display: inline-block;
    transform: skewX(15deg);
    /* 文字倾斜15度，抵消按钮的倾斜效果 */
}

/* 选中按钮样式 */
.tab-button.active {
    background: linear-gradient(180deg, rgba(0, 135, 255, 0.4) 0%, rgba(0, 135, 255, 0.6) 100%);
    color: #fff;
    border: none;
    outline: none;
    /* 选中状态也去掉黑色边框 */
}

.company-header {
    display: flex;
    align-items: flex-start;
    margin-bottom: 24px;
    padding-bottom: 20px;
    background-color: #04142B;
    padding: 20px;

}

.company-logo {
    width: 80px;
    height: 80px;
    border-radius: 4px;
    margin-right: 24px;
    background-color: #fff;
}

.company-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* 第一行：公司名称和上传日期 */
.header-row-1 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.tilted-tag {
    display: inline-block;
    border-radius: 0px 0px 0px 0px;
    border: 1px solid #DDDDDD;
    margin: 0 5px;
    font-size: 12px;
    padding: 5px;
    transform: skew(-15deg);
    color: #fff;
}

.tag-text {
    transform: skew(15deg);
}

.company-name {
    font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
    font-weight: 500;
    margin: 0;
    font-size: 22px;
    color: #fff;
}

.upload-date {
    margin: 0;
    color: #ddd;
    font-size: 13px;
    font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
}

/* 第二行：税务代码、联系人和地址 */
.header-row-2 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-top: 10px;
}

.company-details {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.tax-tag {
    font-size: 14px;
    color: #fff;
}

.meta-item {
    padding: 2px 8px;
    color: #fff;
    border-radius: 4px;
    font-size: 14px;
}

.company-address {
    margin: 0;
    color: #ddd;
    font-size: 14px;
    line-height: 1.5;
    flex: 0 1 auto;
}

/* 响应式布局 */
@media (max-width: 768px) {
    .company-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .company-logo {
        margin-bottom: 16px;
        margin-right: 0;
    }

    .header-row-1 {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .company-details {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
}

.tab-content-section {
    padding: 20px;
    background-color: #04142B;
    color: #fff;
    border-radius: 4px;
    max-height: 580px;
    overflow: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.05);
}

.section-title {
    font-size: 18px;
    font-weight: 500;
    margin: 0 0 16px 0;
    color: #fff;
}

.company-description,
.position-description,
.qualification-description {
    line-height: 1.8;
    text-align: justify;
    margin-bottom: 20px;
    font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
    font-weight: 500;
    font-size: 16px;
    color: #DDDDDD;
}

.qualification-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
}

.qualification-tag {
    margin-bottom: 8px;
}

/* 响应式布局 */
@media (max-width: 768px) {
    .company-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .company-logo {
        margin-bottom: 16px;
    }

    .company-info {
        margin: 0 0 16px 0;
    }

    .company-id {
        align-self: flex-start;
    }

    .tab-content-section {
        padding: 15px;
    }
}








/* 产品列表优化 - 确保每行3个 */
.products {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 16px;
    margin-top: 16px;
}

/* 产品卡片样式 - 紧凑设计 */
.product-card {
    width: calc(33.333% - 12px);
    /* 每行3个，减去间距 */
    background: #092742;
    border-radius: 8px;
    padding: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    transition: all 0.2s ease;
    margin-bottom: 16px;
}

/* 卡片悬浮效果 */
.product-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    background: linear-gradient(180deg, rgba(0, 135, 255, 0.25) 0%, rgba(0, 135, 255, 0.52) 100%);
}

/* 产品图标 */
.product-icon-container {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

.product-image-container {
    width: 60px;
    height: 60px;
    margin-right: 15px;
    border-radius: 4px;
    overflow: hidden;
}

.product-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.product-image-placeholder {
    width: 100%;
    height: 100%;
    background-color: #6c757d;
    border-radius: 4px;
}

.product-icon {
    font-size: 18px;
    color: #fff;
    max-width: 300px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: help;
}

/* 产品名称 */
.product-card h2 {
    font-size: 16px;
    font-weight: 600;
    color: #303133;
    margin-bottom: 12px;
    text-align: center;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 产品参数 */
.product-card p {
    margin: 6px 0;
    font-size: 13px;
    line-height: 1.5;
    color: #fff;
}

/* 参数标签 */
.product-card p strong {
    color: #fff;
    font-weight: 500;
    font-size: 12px;
}

/* 响应式布局 - 确保不同屏幕尺寸下的适应性 */
@media (max-width: 768px) {
    .product-card {
        width: calc(50% - 8px);
        /* 移动端每行2个 */
        padding: 14px;
    }
}

@media (max-width: 480px) {
    .product-card {
        width: 100%;
        /* 小屏设备单行显示 */
    }
}

/* 平板设备优化 */
@media (min-width: 769px) and (max-width: 1199px) {
    .products {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    }
}

/* 加载动画效果 */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.product-card {
    animation: fadeIn 0.4s ease-out;
}

/* 为每个卡片添加不同的延迟动画，创造错落有致的效果 */
.product-card:nth-child(1) {
    animation-delay: 0.05s;
}

.product-card:nth-child(2) {
    animation-delay: 0.1s;
}

.product-card:nth-child(3) {
    animation-delay: 0.15s;
}

.product-card:nth-child(4) {
    animation-delay: 0.2s;
}

.product-card:nth-child(5) {
    animation-delay: 0.25s;
}

.product-card:nth-child(6) {
    animation-delay: 0.3s;
}

/* 美化滚动条 */
.product-card::-webkit-scrollbar {
    width: 6px;
}

.product-card::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.product-card::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
}

.product-card::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}


.product-standard {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #f0f0f0;
}

.product-standard h3 {
    font-size: 14px;
    font-weight: 600;
    margin: 0 0 10px 0;
    color: #fff;
}

.standard-item {
    font-size: 12px;
    margin: 4px 0 !important;
    line-height: 1.4;
    color: #fff;
    word-break: break-all;
    padding: 4px;
    border: none;
}

.standard-item strong {
    color: #fff;
    font-weight: 500;
    font-size: 12px;
}

.no-standard {
    margin-top: 12px;
    color: #909399;
    font-size: 12px;
    font-style: italic;
}

/* 弹窗产品内容样式 */
.dialog-product-content {
    padding: 10px 0;
}

.dialog-header-section {
    display: flex;
    align-items: flex-start;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* 左侧图片样式 */
.dialog-image-container {
    width: 78px;
    height: 78px;
    margin-right: 20px;
    border-radius: 4px;
    overflow: hidden;
    flex-shrink: 0;
    background-color: #fff;
}

.dialog-product-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.dialog-image-placeholder {
    width: 100%;
    height: 100%;
    background-color: #6c757d;
    border-radius: 4px;
}

/* 右侧信息区域 */
.dialog-info-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* 第一行：产品名称和标签 */
.dialog-row-1 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.dialog-product-name {
    font-size: 20px;
    font-weight: 600;
    color: #fff;
    max-width: 60%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: help;
}

.dialog-tags-container {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* 第二行：公司名称和创建时间 */
.dialog-row-2 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.dialog-company-name {
    font-size: 16px;
    font-weight: 500;
    color: #fff;
    margin: 0;
}

.dialog-create-time {
    font-size: 14px;
    color: #ddd;
}

.product-standard-large {
    margin-top: 16px;
}

.eldiasectiontitle {
    padding: 8px 4px 4px 4px;
    font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
    font-weight: 500;
    font-size: 16px;
    color: #FFFFFF;
}

.elprodescript {
    padding: 4px;
    font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
    font-weight: 500;
    font-size: 14px;
    color: #dddddd;
}

.standard-item-large {
    font-size: 14px;
    line-height: 1.6;
    color: #ddd;
    word-break: break-all;
    padding: 4px;
    border: none;
}

.standard-item-large strong {
    color: #ddd;
    font-weight: 600;
    font-size: 14px;
    min-width: 90px;
    display: inline-block;
}

.no-standard-large {
    margin-top: 16px;
    color: #909399;
    font-size: 14px;
    font-style: italic;
    text-align: center;
    padding: 20px;
}

/* .el-dialog 弹窗样式优化 */
:deep(.el-dialog) {
    border: none;
}

:deep(.el-upload-dragger) {
    border: 1px dashed #fff;
    background-color: transparent;
}

:deep(.el-dialog__header) {
    border-bottom: none;
}
</style>